
<style>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}
.grid-cell {
  margin: 0;
  min-height: 60px;
  position: relative;

}
.thumb-text {
  z-index: 1;
  margin: 5px;
  font-weight: 100;
  background: charcoal;
}
.grid-cell:hover {
  filter: hue-rotate(3.142rad);
}

</style>

<div class='wrapper'>

  <div class='grid-cell'>
      <a href="./gallery/arc_layer.html">
    <img width="200" src="./_images/arc_layer.png"></img>
      <div class='thumb-text'>ArcLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/binary_transport.html">
    <img width="200" src="./_images/binary_transport.png"></img>
      <div class='thumb-text'>Binary Transport</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/bitmap_layer.html">
    <img width="200" src="./_images/bitmap_layer.png"></img>
      <div class='thumb-text'>BitmapLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/carto_sql_layer.html">
    <img width="200" src="./_images/carto_sql_layer.png"></img>
      <div class='thumb-text'>CartoSqlLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/column_layer.html">
    <img width="200" src="./_images/column_layer.png"></img>
      <div class='thumb-text'>ColumnLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/contour_layer.html">
    <img width="200" src="./_images/contour_layer.png"></img>
      <div class='thumb-text'>ContourLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/custom_layer.html">
    <img width="200" src="./_images/custom_layer.png"></img>
      <div class='thumb-text'>CustomLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/geojson_layer.html">
    <img width="200" src="./_images/geojson_layer.png"></img>
      <div class='thumb-text'>GeoJsonLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/geopandas_integration.html">
    <img width="200" src="./_images/geopandas_integration.png"></img>
      <div class='thumb-text'>Geopandas Integration</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/globe_view.html">
    <img width="200" src="./_images/globe_view.png"></img>
      <div class='thumb-text'>GlobeView</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/great_circle_layer.html">
    <img width="200" src="./_images/great_circle_layer.png"></img>
      <div class='thumb-text'>GreatCircleLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/grid_layer.html">
    <img width="200" src="./_images/grid_layer.png"></img>
      <div class='thumb-text'>GridLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/h3_cluster_layer.html">
    <img width="200" src="./_images/h3_cluster_layer.png"></img>
      <div class='thumb-text'>H3ClusterLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/h3_hexagon_layer.html">
    <img width="200" src="./_images/h3_hexagon_layer.png"></img>
      <div class='thumb-text'>H3HexagonLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/heatmap_layer.html">
    <img width="200" src="./_images/heatmap_layer.png"></img>
      <div class='thumb-text'>HeatmapLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/hexagon_layer.html">
    <img width="200" src="./_images/hexagon_layer.png"></img>
      <div class='thumb-text'>HexagonLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/icon_layer.html">
    <img width="200" src="./_images/icon_layer.png"></img>
      <div class='thumb-text'>IconLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/line_layer.html">
    <img width="200" src="./_images/line_layer.png"></img>
      <div class='thumb-text'>LineLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/path_layer.html">
    <img width="200" src="./_images/path_layer.png"></img>
      <div class='thumb-text'>PathLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/point_cloud_layer.html">
    <img width="200" src="./_images/point_cloud_layer.png"></img>
      <div class='thumb-text'>PointCloudLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/polygon_layer.html">
    <img width="200" src="./_images/polygon_layer.png"></img>
      <div class='thumb-text'>PolygonLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/s2_layer.html">
    <img width="200" src="./_images/s2_layer.png"></img>
      <div class='thumb-text'>S2Layer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/scatterplot_layer.html">
    <img width="200" src="./_images/scatterplot_layer.png"></img>
      <div class='thumb-text'>ScatterplotLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/screengrid_layer.html">
    <img width="200" src="./_images/screengrid_layer.png"></img>
      <div class='thumb-text'>ScreengridLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/terrain_layer.html">
    <img width="200" src="./_images/terrain_layer.png"></img>
      <div class='thumb-text'>TerrainLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/text_layer.html">
    <img width="200" src="./_images/text_layer.png"></img>
      <div class='thumb-text'>TextLayer</div></a>
  </div>

  <div class='grid-cell'>
      <a href="./gallery/trips_layer.html">
    <img width="200" src="./_images/trips_layer.png"></img>
      <div class='thumb-text'>TripsLayer</div></a>
  </div>

</div>